<template>
    <div class="minder-editor-container">
        <div class="quickbar">
            <el-dropdown placement="top">
                <i class="el-icon-zoom-in"></i>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="execCommand('Zoom', 200)">200%</el-dropdown-item>
                  <el-dropdown-item @click.native="execCommand('Zoom', 150)">150%</el-dropdown-item>
                  <el-dropdown-item @click.native="execCommand('Zoom', 100)">100%</el-dropdown-item>
                  <el-dropdown-item @click.native="execCommand('Zoom', 50)">50%</el-dropdown-item>
                  <el-dropdown-item @click.native="execCommand('Zoom', 25)">25%</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <el-dropdown v-if="readOnly!==true" placement="top">
                <i class="el-icon-pie-chart"></i>
                <el-dropdown-menu slot="dropdown" class="quickul mold">
                  <el-dropdown-item @click.native="execCommand('template', 'default')">
                    <span class="default"></span>
                  </el-dropdown-item>
                  <el-dropdown-item @click.native="execCommand('template', 'structure')">
                    <span class="structure"></span>
                  </el-dropdown-item>
                  <el-dropdown-item @click.native="execCommand('template', 'filetree')">
                    <span class="filetree"></span>
                    </el-dropdown-item>
                  <el-dropdown-item @click.native="execCommand('template', 'right')">
                    <span class="right"></span>
                  </el-dropdown-item>
                  <el-dropdown-item @click.native="execCommand('template', 'fish-bone')">
                    <span class="fish-bone"></span>
                  </el-dropdown-item>
                  <el-dropdown-item @click.native="execCommand('template', 'tianpan')">
                    <span class="tianpan"></span>
                  </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <el-dropdown v-if="readOnly!==true" placement="top">
                <i class="el-icon-magic-stick"></i>
                  <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="execCommand('theme', 'fresh-blue')">天空蓝</el-dropdown-item>
                  <el-dropdown-item @click.native="execCommand('theme', 'wire')">线框</el-dropdown-item>
                  <el-dropdown-item @click.native="execCommand('theme', 'fish')">鱼骨图</el-dropdown-item>
                  <el-dropdown-item @click.native="execCommand('theme', 'classic')">脑图经典</el-dropdown-item>
                  <el-dropdown-item @click.native="execCommand('theme', 'classic-compact')">紧凑经典</el-dropdown-item>
                  <el-dropdown-item @click.native="execCommand('theme', 'snow')">温柔冷光</el-dropdown-item>
                  <el-dropdown-item @click.native="execCommand('theme', 'snow-compact')">紧凑冷光</el-dropdown-item>
                  <el-dropdown-item @click.native="execCommand('theme', 'tianpan')">经典天盘</el-dropdown-item>
                  <el-dropdown-item @click.native="execCommand('theme', 'tianpan-compact')">紧凑天盘</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <el-dropdown placement="top">
                <i class="el-icon-connection"></i>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="execCommand('ExpandToLevel', 1)">展开到一级节点</el-dropdown-item>
                  <el-dropdown-item @click.native="execCommand('ExpandToLevel', 2)">展开到二级节点</el-dropdown-item>
                  <el-dropdown-item @click.native="execCommand('ExpandToLevel', 3)">展开到三级节点</el-dropdown-item>
                  <el-dropdown-item @click.native="execCommand('ExpandToLevel', 4)">展开到四级节点</el-dropdown-item>
                  <el-dropdown-item @click.native="execCommand('ExpandToLevel', 5)">展开到五级节点</el-dropdown-item>
                  <el-dropdown-item @click.native="execCommand('ExpandToLevel', 99)">展开全部节点</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <el-tooltip placement="top" content="居中">
                <i class="el-icon-location-outline" @click="minder.execCommand('camera', minder.getRoot(), 600)"></i>
            </el-tooltip>
            <el-tooltip placement="top" content="移动">
                <i class="el-icon-discover" :style="{ color: isHand ? '#409EFF':'' }" @click="[minder.execCommand('Hand'),isHand=!isHand]"></i>
            </el-tooltip>
        </div>
        <div :id="id"></div>
    </div>
</template>

<style lang="scss" scoped>
    .basebtn {
        color: #fff;
        background-color: #409eff;
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        border: 1px solid #dcdfe6;
        -webkit-appearance: none;
        text-align: center;
        box-sizing: border-box;
        outline: none;
        margin: 0;
        transition: 0.1s;
        font-weight: 500;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        padding: 8px 12px;
        font-size: 14px;
        border-radius: 4px;
    }

    .baseSelect {
        height: 32px;
        option {
            min-height: 1.5em;
        }
    }

    .quickbar {
        position: fixed;
        left: 20px;
        bottom: 20px;
        height: 34px;
        border-radius: 3px;
        box-shadow: 3px 3px 10px rgba(0,0,0,.2);
        background-color: #fff;
        color: #666;
        z-index: 10;
        display: flex;
        padding: 0 6px;
        align-items: center;
        i {
            font-size: 22px;
            width: 34px;
            height: 34px;
            line-height: 34px;
            display: block;
            text-align: center;
            transform: scale(1);
            cursor: pointer;
            padding: 0;
            color: #666666;
            &:hover {
                color: #232323;
            }
            &.active {
                color: #0285d7;
            }
        }
        .quickul {
            li {
                cursor: pointer;
                padding: 8px 0;
                &:hover {
                    color: #0285d7
                }
            }
            &.mold {
                span {
                    display: block;
                    width: 30px;
                    background: url() no-repeat;background-size: 300px 24px;
                    height: 30px;
                    &.default {
                        background-position: 0 3px
                    }
                    &.structure {
                        background-position: -30px 3px
                    }
                    &.filetree {
                        background-position: -60px 3px
                    }
                    &.right {
                        background-position: -90px 3px
                    }
                    &.fish-bone {
                        background-position: -120px 3px
                    }
                    &.tianpan {
                        background-position: -150px 3px
                    }
                }
            }
        }
    }

    .el-dropdown-menu__item {
                      span {
                    display: block;
                    width: 30px;
                    background: url() no-repeat;background-size: 300px 24px;
                    height: 30px;
                    &.default {
                        background-position: 0 3px
                    }
                    &.structure {
                        background-position: -30px 3px
                    }
                    &.filetree {
                        background-position: -60px 3px
                    }
                    &.right {
                        background-position: -90px 3px
                    }
                    &.fish-bone {
                        background-position: -120px 3px
                    }
                    &.tianpan {
                        background-position: -150px 3px
                    }
                }
    }
</style>
<script>
import { generateMixed } from 'vue-kityminder-gg/src/utils/index.js'
import 'vue-kityminder-gg/examples/styles/minder.css'
// import JSPDF from 'jspdf'

export default {
  name: 'mind-editor',
  props: {
    value: {
      type: Object,
      default: function () {
        return {}
      }
    },
    AccessKey: {
      type: String,
      default: ''
    },
    SecretKey: {
      type: String,
      default: ''
    },
    Domain: {
      type: String,
      default: ''
    },
    scope: {
      type: String,
      default: ''
    },
    isImageUpload: {
      type: Boolean,
      default: true
    },
    saveShow: {
      type: Boolean,
      default: true
    },
    readOnly: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: 'minder-component-' + generateMixed(12)
    }
  },
  data () {
    return {
      minder: null,
      isHand: false,
      bakValue: ''
    }
  },
  methods: {
    execCommand (var1, var2) {
      if (this.readOnly === true) {
        this.minder.enable()
        this.$nextTick(() => {
          this.minder.execCommand(var1, var2)
          this.$nextTick(() => {
            this.minder.disable()
            if (this.isHand) {
              this.minder.execCommand('Hand')
            }
          })
        })
      } else {
        this.minder.execCommand(var1, var2)
      }
    },
    exportHandle (n, filename) {
      filename = filename || (this.value.root.data.text || '无标题')
      if (n === 0 || n === 'png') {
        this.minder.exportData('png').then((content) => {
          const element = document.createElement('a')
          element.setAttribute('href', content)
          element.setAttribute('download', filename)
          element.style.display = 'none'
          document.body.appendChild(element)
          element.click()
          document.body.removeChild(element)
        })
      } else if (n === 1 || n === 'pdf') {
        // this.minder.exportData('png').then((content) => {
        //   const doc = new JSPDF()
        //   doc.addImage(content, 'PNG', 0, 0, 0, 0)
        //   doc.save(`${filename}.pdf`)
        // })
      }
    },
    rendData () {
      this.$nextTick(() => {
        setTimeout(() => {
          if (this.minder !== null) {
            if (this.bakValue === JSON.stringify(this.value)) {
              return
            }
            this.bakValue = JSON.stringify(this.value)
            this.minder.importJson(this.value)
            return
          }
          window.__minderReadOnly = this.readOnly
          const Editor = require('./editor')
          this.minder = window.editor = new Editor(document.getElementById(this.id)).minder
          this.bakValue = JSON.stringify(this.value)
          this.minder.importJson(this.value)
          if (this.readOnly === true) {
            this.minder.disable()
            this.minder.execCommand('Hand')
            this.isHand = true
          }
          this.$emit('minderHandle', this.minder)
          this.minder.on('contentchange', e => {
            const newJson = this.minder.exportJson()
            if (this.bakValue === JSON.stringify(newJson)) {
              return
            }
            this.bakValue = JSON.stringify(newJson)
            this.$emit('input', newJson)
          })
        }, 300)
      })
    }
  },
  watch: {
    value: {
      handler: function (newObj) {
        if (typeof newObj !== 'object' || newObj === null) {
          newObj = {
            root: newObj,
            theme: 'fresh-blue',
            template: 'default'
          }
        }
        if (typeof newObj.root !== 'object' || newObj.root === null || newObj.root.length === 0) {
          newObj.root = {
            data: {
              id: generateMixed(12),
              text: '默认节点'
            },
            children: []
          }
        }
        if (typeof newObj.theme !== 'string') {
          newObj.theme = 'fresh-blue'
        }
        if (typeof newObj.template !== 'string') {
          newObj.template = 'default'
        }
        this.rendData()
      },
      deep: true,
      immediate: true
    }
  }
}
</script>
